<template>
  <table class="_table">
    <tr class="_head" :class="{ headPd: isPding }">
      <th
        class="_th"
        :class="{ _align: props.isAlign }"
        @click="emits('clickHeadTitle', item)"
        v-for="item in headList"
        :key="item._title"
      >
        {{ item._title }}
        <span v-if="item._title === '销售金额'" class="icon a-svg"></span>
      </th>
    </tr>

    <div v-if="bodyList.length > 0">
      <tr class="_body" :class="{ headPd: isPding }" v-for="item in bodyList" :key="item.id">
        <td
          class="_td"
          :class="{ _align: props.isAlign, _error: item[ev.key] === '驳回' }"
          :style="props.compatible"
          @click="emits('clickItem', item)"
          v-for="ev in headList"
          :key="ev"
        >
          <text v-if="item[ev.key] === '温度报警'">
            温度
            <text style="color: #f14b4b">{{ item[ev.additional] }}</text>
          </text>
          <text v-if="ev._title === '已售数量'">
            {{item[ev.key]}}份
            <text style="color: #f14b4b" v-if="item[ev.additional]">(-{{item[ev.additional]}})</text>
          </text>
          <text :style="ev.style" v-if="ev._title !== '已售数量' && item[ev.key] !== '温度报警'"> {{ item[ev.key] }}</text>
        </td>
      </tr>
      <tr class="_body _heji" v-if="props.compatible" :class="{ headPd: isPding }">
        <td class="_td" :style="props.compatible">合计</td>
        <td class="_td" :style="props.compatible">{{ props.delivery_sum }}</td>
        <td class="_td" :style="props.compatible">{{ props.sell_sum }}</td>
        <td class="_td" :style="props.compatible">{{ props.surplus_num }}</td>
      </tr>
    </div>
    <Null_data style="height: 100%" v-else />
  </table>
</template>

<script setup>
import { ref, reactive } from 'vue'
import Null_data from '@/components/Null_data.vue'

const props = defineProps({
  headList: {
    type: Array,
  },
  bodyList: {
    type: Array,
  },
  compatible: {
    type: String,
  },

  delivery_sum: {
    type: [String, Number],
  },
  sell_sum: {
    type: [String, Number],
  },
  surplus_num: {
    type: [String, Number],
  },
  isAlign: {
    type: Boolean,
    default: false,
  },
  isPding: {
    type: Boolean,
    default: false,
  },
})

const emits = defineEmits(['clickHeadTitle', 'clickItem'])
</script>

<style lang="scss">
._table {
  border-collapse: collapse;
  border: 0px solid #000;
  max-width: 100%;
  box-sizing: border-box;
  background-color: #fff;
  letter-spacing: -0.2px;
}
._head {
  width: 347px;
  box-sizing: border-box !important;
  height: 40px;
  line-height: 40px;
  background: #ecfff9;
  color: var(--subjectFc);
  display: flex;
  justify-content: space-between;
  text-align: left;
  padding: 0 12px 0 6px;
  ._th {
    flex: 1;
    text-align: center;
    font-family: 'pingFang';
    font-weight: 400;
    font-size: 14px;
    .a-svg {
      font-size: 14px;
      color: #c80000;
    }
  }
}

._body {
  font-family: 'pingFang';
  width: 347px;
  display: flex;
  justify-content: space-between;
  padding: 0 12px 0 10px;
  border-bottom: 1px solid #f9f9f9;
  &:last-child {
    border-bottom: 0;
  }
  ._td {
    flex: 1;
    text-align: center;
    height: 36px;
    line-height: 36px;
    font-size: 13px;
    color: var(--c6);
    overflow: hidden; /* 隐藏溢出的部分 */
    white-space: nowrap; /* 防止文字换行 */
    text-overflow: ellipsis; /* 显示省略号（小数点） */
    &:last-child {
      color: #05a143;
      padding-right: 0;
      text-align: center;
    }
  }
}
._heji {
  margin-top: 62px;
}
._align:first-child {
  text-align: left;
}
._align:last-child {
  text-align: right !important;
}
._error {
  color: #c80000 !important;
  text-decoration: underline;
}
.headPd {
  padding: 0;
  ._th {
    font-size: 14px;
  }
}
</style>
